<template>
    <div class="news">
        <div class="news-list">
            <swiper :options="swiperOption" ref="mySwiper" class="swiper-wrapper">
                <swiper-slide class="news-item" v-for="(item, index) in list" :key="'a' + index">
                    <a :href="item.link" target="_blank">
                        <p class="news-title">{{item.desc}}</p>
                        
                        <div class="news-com">
                            <img :src="item.img" alt="">
                            <p class="news-desc">{{item.com}}</p>
                        </div>
                    </a>
                </swiper-slide>
            </swiper>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
</template>

<script>
    
    export default {
        name: "News",
        data() {
            return {
                list: [
                    {
                        desc: '留学移民市场仍是一片蓝海 出国找中介能否少走弯路？',
                        com: '新华社客户端',
                        link: 'http://xhpfmapi.zhongguowangshi.com/vh512/share/6349500',
                        img: require('@assets/xinhua.png')
                    },
                    {
                        desc: '趣探路app上线一周引关注 被誉为移民留学界的大众点评',
                        com: '中国新闻网',
                        link: 'http://www.chinanews.com/business/2019/07-29/8909903.shtml',
                        img: require('@assets/chinanews.png')
                    },
                    {
                        desc: '“互联网＋留学”领域的破局者 趣探路深耕垂直领域的三板斧',
                        com: '腾讯',
                        link: 'https://edu.qq.com/a/20190805/003718.htm',
                        img: require('@assets/tencent.png')
                    }, {
                        desc: '年轻新侨成为主力军 互联网化将是侨务工作新趋势',
                        com: '凤凰网',
                        link: 'http://finance.ifeng.com/c/7oyLvzVOhKi',
                        img: require('@assets/fenghuang.png')
                    }, {
                        desc: '“互联网+”赋能移民领域 趣探路构建出国服务App社区新生态',
                        com: '财经网',
                        link: 'http://industry.caijing.com.cn/20190812/4608869.shtml',
                        img: require('@assets/caijing.png')
                    }
                ],
                swiperOption: {
                    slidesPerView: 'auto',
                    slidesPerGroup: 4,
                    spaceBetween: 12,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                        hideOnClick: true,
                        hiddenClass: 'my-button-hidden',
                    },
                }
            }
        }
    }
</script>


<style scoped lang="less">
    /*Swiper样式 */
    .swiper-button-prev {
        width: 48px;
        height: 48px;
        left: 0;
        top: 76px;
        background:  url(~@assets/left.png) 0 0 no-repeat;
        -webkit-background-size: 100% 100%;
        background-size: 100% 100%;
        outline: none;
        border: none;
    }
    
    .swiper-button-next {
        width: 48px;
        height: 48px;
        right: 0;
        top: 76px;
        background:  url(~@assets/right.png) 0 0 no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
        outline: none;
        border: none;
    }
    
    .news {
        .news-list {
            position: relative;
            width: 1128px;
            margin: 0 auto;
            
            .news-item {
                width: 273px;
                height: 159px;
                padding: 25px 16px;
                background-color: rgba(0, 0, 0, .04);
                cursor: pointer;
                
                .news-title {
                    height: 44px;
                    margin-bottom: 34px;
                    font-size: 16px;
                    font-weight: bold;
                    color: rgba(0, 0, 0, 1);
                    line-height: 22px;
                    .textEllipsis(3);
                }
                
                .news-com {
                    .flexed(flex-start);
                    
                    img {
                        width: 30px;
                        height: auto;
                        margin-right: 8px;
                        border-radius: 50%;
                    }
                    
                    .news-desc {
                        font-size: 14px;
                        font-weight: 400;
                        color: rgba(0, 0, 0, .8);
                        line-height: 26px;
                    }
                }
                
                &:hover {
                    background: rgba(255, 220, 32, .16);
                }
            }
        }
    }
</style>
